<template>
	<view>
		<view class="title">
			<view class="top">
				<view class="back" @click="goback">
					{{'<'}}
				</view>
				<view class="title-name">
					{{chooseFoods[0].name}}
				</view>
			</view>
			<view class="bottom">
				<image src="../../static/img/xuhuan@2x.png" mode=""></image>
				<image src="../../static/img/zhuanfa@2x.png" mode=""></image>
			</view>
		</view>
		<!-- 图片 -->
		<view class="img">
			<!-- <image :src="chooseFoods[0].coverpic" mode=""></image> -->
			<video controls object-fit='fill' :id="chooseFoods[0]._id" :src="chooseFoods[0].vid" >
			</video>
			<view class="module" v-if="vip==false">
				<h1>开通会员观看视频做法</h1>
				<button  @click="tovip">立即开通</button>
				<h1>已是会员，立即登录</h1>
			</view>
		</view>
		<!-- 会员 -->
		<view class="vip">
			会员低至2元/月，免广告、看10000+名厨视频
		</view>
		<!-- 菜品信息 -->
		<view class="food-msg">
			<h1>{{chooseFoods[0].name}}</h1>
			<view class="msg">
				<view class="left">
					<text>会员专享</text>
					<image src="../../static/img/mengbanzu40@2x.png" mode=""></image>
				</view>
				<view class="center">
					<text>{{chooseFoods[0].collections}}</text>
					<image src="../../static/img/liulam @2x(4).png" mode=""></image>
				</view>
				<view class="center">
					<text>{{chooseFoods[0].pageview}}</text>
					<image src="../../static/img/soucang@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 表格 -->
		<FoodsMixed :msg='chooseFoods'></FoodsMixed>
	</view>
</template>

<script>
	import FoodsMixed from "@/component/foodsMixed.vue"
	import {
		getFoodDataApi
	} from "@/apis/index.js"
	export default {
		data() {
			return {
				chooseFoods: [],
				vip:false
			};
		},
		components: {
			FoodsMixed
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			getFoodData(id) {
				getFoodDataApi(id).then((res) => {
					console.log(11, res);
					this.chooseFoods = res.message
				})
			},
			tovip() {
				uni.navigateTo({
					//url:"../car/car?id=1",
					//url:"../car/car?id="+id
					url: "../myVip/myVip"
				})
			}
		},
		onLoad(id) {

			this.getFoodData(id)
		},
		created() {
		let userinfo=uni.getStorageSync('userinfo')
		this.vip=userinfo.vip || false
		}

	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		height: 220rpx;
		background: url("../../static/img/ditu.png");
		background-size: cover;
		padding: 60rpx 20rpx 0 32rpx;
		box-sizing: border-box;

		.top {
			display: flex;
			margin-bottom: 40rpx;

			.title-name {
				// margin: 0 auto;
				margin-left: 238rpx;
				color: white;
				font-weight: bold;
				font-size: 42rpx;
			}

			.back {
				font-weight: bold;
				// margin-top: -6rpx;
				font-size: 40rpx;
			}
		}

		.bottom {
			float: right;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}

	.img {
		width: 100%;
		height: 386rpx;
		position: relative;

		video{
			width: 100%;
			height: 100%;
		}

		.module {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .3);
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			h1 {
				color: white;
			}

			button {
				background-color: orange;
				border-radius: 20rpx;
				color: white;
			}
		}
	}

	.vip {
		width: 686rpx;
		height: 88rpx;
		background-color: orange;
		color: white;
		text-align: center;
		line-height: 88rpx;
		margin: 20rpx auto;
	}

	.food-msg {
		width: 100%;
		text-align: center;

		h1 {
			margin-bottom: 20rpx;
		}

		.msg {
			display: flex;
			justify-content: center;

			.left {
				margin-right: 20rpx;

				text {
					color: orange;
					font-size: 24rpx;
				}

				image {
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}
			}

			.center {
				margin-right: 20rpx;

				text {

					font-size: 24rpx;
				}

				image {
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>
